<template>
  <el-card>
    <template #header>
      <div>loadingDelay【useRequest】</div>
    </template>
    <div>Username：{{ data }}</div>
    <div>Username：{{ loading ? "loading..." : data1 }}</div>
  </el-card>
</template>

<script setup>
  import { useRequest } from "vue-hooks-plus";

  function getUsername() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("vue-hooks-plus useRequest");
      }, 1000);
    });
  }

  function getUsername1() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("vue-hooks-plus useRequest A");
      }, 1000);
    });
  }

  const { data } = useRequest(() => getUsername());
  const { data: data1, loading } = useRequest(() => getUsername1(), {
    loadingDelay: 3000,
  });
</script>
